<template>
    <div id="app">
        <!--修改名称页面-->
        <div class="tuox">
            <div>
                <div><img :src="this.list.img_url"></div>
                <div>
                    <div>{{this.list.phone_number}}</div>
                </div>
            </div>
            <div>
                <span @click="bianji">编辑</span>
            </div>
        </div>

        <!--退出登录-->
        <div class="tuichu"><router-link v-bind="{to:this.tuichu}"><!--to="/login"--><div @click="tui">退出登录</div></router-link></div>

        <!--改名模块-->
        <div class="gai" :class="this.ga == true?Classg:''">
            <div class="ffg">
                <div>修改昵称</div>
                <div><input type="text" v-model="name"></div>
                <div class="qu">
                    <span @click="qushiao">取消</span><span @click="quedin">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
	export default {
		name: "",
		data() {
			return {
                tuichu:'',
                list:{},
                name:'',
                ga:false,
                Classg:'gggg'
            }
		},
        created(){
            this.list = JSON.parse(sessionStorage.getItem("data"));
            //console.log(this.list);
            //console.log(JSON.parse(sessionStorage.getItem("data")));
            this.name = this.list.phone_number;
            this.tui();
        },
		methods:  {
            tui:function(){
                if(this.tuichu != ''){
                    sessionStorage.clear();
                }
                this.tuichu = "/login";
                //
            },
            bianji:function(){
                this.ga = true;
                Toast({
                    message: '改名成功',
                    position: 'bottom',
                    duration: 5000
                });
            },
            qushiao:function () {
                this.ga = false;
            },
            quedin:function () {
                this.ga = false;
                this.list.phone_number = this.name;
            }
		}
	}
</script>

<style scoped>
    #app{
        width: 100%;
        height: 100%;
        position: relative;
        font-size: 14px;
    }
    .tuichu{
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 30px;
        width: 100%;
    }
    .tuichu div{
        margin: 0 25px;
        padding: 6px 0;
        border-radius: 4px;
        border:1px solid #cf4d20;
        color:#cf4d20;
    }
    .tuox{
        background-color: white;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        line-height: 30px
    }
    .tuox>div:nth-child(1){display: flex;}
    .tuox>div:nth-child(1)>div:first-child{
        width: 30px;
        height:30px;
        margin-right: 10px}
    .tuox>div:nth-child(1)>div:first-child img{width: 100%;}
    .tuox>div:nth-child(2){color:#2CC17B }
    .ffg{
        background-color: white;
        width: 75%;
        margin: 150px auto;
    }
    .ffg>div:first-child{
        padding: 10px;
    }
    .ffg>div:nth-child(2){
        margin: 0 10px;
    }
    input[type='text']{
        height: 20px;
        margin-bottom: 20px;
    }
    .qu{
        margin: 10px 0 0;
        display: flex;
    }
    .qu>span{
        padding: 6px 0;
        text-align: center;
        flex: 1}
    .qu>span:nth-child(1){background-color: #d9d9d9}
    .qu>span:nth-child(2){background-color:#2CC17B;color: white }
    .gai{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background-color: rgba(0, 0, 0, 0.29);
    }
    .gggg{display: block}
</style>
